<template>
	<view class="page flex-col">
		<view class="box_1 flex-col">
			<view class="text-wrapper_1 flex-col">
				<text class="text_1">家庭成员</text>
			</view>
			<view class="group_1 flex-col">
				<view class="image-text_1 flex-row justify-between">
					<image class="image_1" referrerpolicy="no-referrer"
						src="https://lanhu-oss-2537-2.lanhuapp.com/MasterDDSSlicePNG0d66abefa77debfa352dab5e75caa071.png" />
					<view class="text-group_1 flex-col justify-between">
						<text class="text_2">快乐一家</text>
						<text class="text_3">创建于&nbsp;2023年12月25日</text>
					</view>
				</view>
				<view class="group_2 flex-col">
					<view class="list_1 flex-row">
						<view class="text-group_2 flex-col justify-between" v-for="(item, index) in loopData0"
							:key="index">
							<text class="text_4" :style="{ color: item.lanhufontColor0 }"
								v-html="item.lanhutext0"></text>
							<text class="text_5" v-html="item.lanhutext1"></text>
						</view>
					</view>
				</view>
			</view>
			<view class="group_3 flex-col justify-between">
				<view class="box_2 flex-row">
					<view class="image-text_2 flex-row justify-between">
						<image class="label_1" referrerpolicy="no-referrer"
							src="https://lanhu-oss-2537-2.lanhuapp.com/MasterDDSSlicePNG977c37dc593fc6e0228c0b145b1b7f5a.png" />
						<view class="text-group_3 flex-col justify-between">
							<text class="text_6">陈志明</text>
							<text class="text_7">创建者</text>
						</view>
					</view>
					<view class="text-wrapper_2 flex-col">
						<text class="text_8">创建者</text>
					</view>
				</view>
				<view class="box_3 flex-row">
					<view class="image-text_3 flex-row justify-between">
						<image class="label_2" referrerpolicy="no-referrer"
							src="https://lanhu-oss-2537-2.lanhuapp.com/MasterDDSSlicePNG801092c4fdb1db95da5c275a17a452f4.png" />
						<view class="text-group_4 flex-col justify-between">
							<text class="text_9">李秀珍</text>
							<text class="text_10">管理员</text>
						</view>
					</view>
					<view class="text-wrapper_3 flex-col">
						<text class="text_11">管理员</text>
					</view>
					<view class="image-wrapper_1 flex-col">
						<image class="label_3" referrerpolicy="no-referrer"
							src="https://lanhu-oss-2537-2.lanhuapp.com/MasterDDSSlicePNG119aa5e2bc3e2567b421d7f1e3717cf9.png" />
					</view>
				</view>
				<view class="box_4 flex-row">
					<image class="label_4" referrerpolicy="no-referrer"
						src="https://lanhu-oss-2537-2.lanhuapp.com/MasterDDSSlicePNG8c2eed7d82d078758484dc430cdc8e68.png" />
					<view class="text-wrapper_4 flex-col justify-between">
						<text class="text_12">陈小明</text>
						<text class="text_13">成员</text>
					</view>
					<view class="text-wrapper_5 flex-col">
						<text class="text_14">成员</text>
					</view>
					<view class="image-wrapper_2 flex-col">
						<image class="label_5" referrerpolicy="no-referrer"
							src="https://lanhu-oss-2537-2.lanhuapp.com/MasterDDSSlicePNG119aa5e2bc3e2567b421d7f1e3717cf9.png" />
					</view>
				</view>
				<view class="box_5 flex-row">
					<image class="label_6" referrerpolicy="no-referrer"
						src="https://lanhu-oss-2537-2.lanhuapp.com/MasterDDSSlicePNGecf018ae420a9ad8f8e7fff22a1ae782.png" />
					<view class="text-wrapper_6 flex-col justify-between">
						<text class="text_15">王婷婷</text>
						<text class="text_16">成员</text>
					</view>
					<view class="text-wrapper_7 flex-col">
						<text class="text_17">成员</text>
					</view>
					<view class="image-wrapper_3 flex-col">
						<image class="label_7" referrerpolicy="no-referrer"
							src="https://lanhu-oss-2537-2.lanhuapp.com/MasterDDSSlicePNG119aa5e2bc3e2567b421d7f1e3717cf9.png" />
					</view>
				</view>
				<view class="box_6 flex-row">
					<image class="label_8" referrerpolicy="no-referrer"
						src="https://lanhu-oss-2537-2.lanhuapp.com/MasterDDSSlicePNG619a6ef2256fa3b4c14b5ad2e3dbb414.png" />
					<view class="text-wrapper_8 flex-col justify-between">
						<text class="text_18">张美玲</text>
						<text class="text_19">成员</text>
					</view>
					<view class="text-wrapper_9 flex-col">
						<text class="text_20">成员</text>
					</view>
					<view class="image-wrapper_4 flex-col">
						<image class="label_9" referrerpolicy="no-referrer"
							src="https://lanhu-oss-2537-2.lanhuapp.com/MasterDDSSlicePNG119aa5e2bc3e2567b421d7f1e3717cf9.png" />
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				loopData0: [{
						lanhutext0: '5',
						lanhufontColor0: 'rgba(59,130,246,1.000000)',
						lanhutext1: '家庭成员',
					},
					{
						lanhutext0: '180',
						lanhufontColor0: 'rgba(34,197,94,1.000000)',
						lanhutext1: '互动次数',
					},
					{
						lanhutext0: '98%',
						lanhufontColor0: 'rgba(168,85,247,1.000000)',
						lanhutext1: '活跃度',
					},
				],
				constants: {},
			};
		},
		methods: {},
	};
</script>

<style lang="scss" scoped>
	.page {
		background-color: rgba(0, 0, 0, 0);
		position: relative;
		width: 750rpx;
		overflow: hidden;

		.box_1 {
			background-color: rgba(250, 250, 250, 1);
			width: 750rpx;
			height: 1524rpx;

			.text-wrapper_1 {
				box-shadow: 0px 2rpx 4rpx 0px rgba(0, 0, 0, 0.05);
				background-color: rgba(255, 255, 255, 1);
				height: 84rpx;
				width: 750rpx;
				align-items: center;
				justify-content: center;

				.text_1 {
					width: 126rpx;
					height: 50rpx;
					overflow-wrap: break-word;
					color: rgba(31, 41, 55, 1);
					font-size: 30rpx;
					font-family: Roboto-Medium;
					font-weight: 500;
					text-align: center;
					white-space: nowrap;
					line-height: 50rpx;
				}
			}

			.group_1 {
				box-shadow: 0px 2rpx 4rpx 0px rgba(0, 0, 0, 0.05);
				background-color: rgba(255, 255, 255, 1);
				width: 694rpx;
				height: 324rpx;
				justify-content: flex-center;
				margin: 14rpx 0 0 28rpx;

				.image-text_1 {
					width: 404rpx;
					height: 112rpx;
					margin: 28rpx 0 0 28rpx;

					.image_1 {
						width: 112rpx;
						height: 112rpx;
					}

					.text-group_1 {
						width: 264rpx;
						height: 92rpx;
						margin-top: 12rpx;

						.text_2 {
							width: 126rpx;
							height: 50rpx;
							overflow-wrap: break-word;
							color: rgba(0, 0, 0, 1);
							font-size: 30rpx;
							font-family: Roboto-Medium;
							font-weight: 500;
							text-align: left;
							white-space: nowrap;
							line-height: 30rpx;
						}

						.text_3 {
							width: 264rpx;
							height: 36rpx;
							overflow-wrap: break-word;
							color: rgba(107, 114, 128, 1);
							font-size: 24rpx;
							font-family: Roboto-Regular;
							font-weight: normal;
							text-align: left;
							white-space: nowrap;
							line-height: 24rpx;
							margin-top: 6rpx;
						}
					}
				}

				.group_2 {
					background-color: rgba(0, 0, 0, 0);
					height: 128rpx;
					border: 2rpx solid rgba(229, 231, 235, 1);
					width: 638rpx;
					margin: 28rpx 0 28rpx 28rpx;
					align-items: center;
					justify-content: center;

					.list_1 {
						width: 640rpx;
						height: 100rpx;
						// margin: 30rpx 0;
						justify-content: space-evenly;

						.text-group_2 {
							height: 100rpx;
							flex: 1;
							justify-content: center;
							align-items: center;

							.text_4 {
								width: 80rpx;
								height: 56rpx;
								overflow-wrap: break-word;
								font-size: 42rpx;
								font-family: Roboto-Medium;
								font-weight: 500;
								text-align: center;
								white-space: nowrap;
								line-height: 56rpx;
							}

							.text_5 {
								width: 98rpx;
								height: 36rpx;
								overflow-wrap: break-word;
								color: rgba(107, 114, 128, 1);
								font-size: 24rpx;
								font-family: Roboto-Regular;
								font-weight: normal;
								text-align: center;
								white-space: nowrap;
								line-height: 24rpx;
								margin-top: 8rpx;
							}
						}
					}
				}
			}

			.group_3 {
				width: 694rpx;
				height: 812rpx;
				margin: 28rpx 0 0 28rpx;

				.box_2 {
					box-shadow: 0px 2rpx 4rpx 0px rgba(0, 0, 0, 0.05);
					background-color: rgba(255, 255, 255, 1);
					width: 694rpx;
					height: 140rpx;

					.image-text_2 {
						width: 190rpx;
						height: 84rpx;
						margin: 28rpx 0 0 28rpx;

						.label_1 {
							width: 84rpx;
							height: 84rpx;
						}

						.text-group_3 {
							width: 84rpx;
							height: 78rpx;
							margin-top: 4rpx;

							.text_6 {
								width: 84rpx;
								height: 42rpx;
								overflow-wrap: break-word;
								color: rgba(0, 0, 0, 1);
								font-size: 28rpx;
								font-family: Roboto-Medium;
								font-weight: 500;
								text-align: left;
								white-space: nowrap;
								line-height: 42rpx;
							}

							.text_7 {
								width: 74rpx;
								height: 36rpx;
								overflow-wrap: break-word;
								color: rgba(107, 114, 128, 1);
								font-size: 24rpx;
								font-family: Roboto-Regular;
								font-weight: normal;
								text-align: left;
								white-space: nowrap;
								line-height: 24rpx;
							}
						}
					}

					.text-wrapper_2 {
						background-color: rgba(240, 249, 235, 1);
						height: 40rpx;
						border: 2rpx solid rgba(225, 243, 216, 1);
						width: 106rpx;
						margin: 50rpx 26rpx 0 344rpx;

						.text_8 {
							width: 72rpx;
							height: 24rpx;
							overflow-wrap: break-word;
							color: rgba(103, 194, 58, 1);
							font-size: 24rpx;
							font-family: Roboto-Regular;
							font-weight: normal;
							text-align: left;
							white-space: nowrap;
							line-height: 24rpx;
							margin: 8rpx 0 0 16rpx;
						}
					}
				}

				.box_3 {
					box-shadow: 0px 2rpx 4rpx 0px rgba(0, 0, 0, 0.05);
					background-color: rgba(255, 255, 255, 1);
					width: 694rpx;
					height: 140rpx;
					margin-top: 28rpx;
					justify-content: flex-center;

					.image-text_3 {
						width: 190rpx;
						height: 84rpx;
						margin: 28rpx 0 0 28rpx;

						.label_2 {
							width: 84rpx;
							height: 84rpx;
						}

						.text-group_4 {
							width: 84rpx;
							height: 78rpx;
							margin-top: 4rpx;

							.text_9 {
								width: 84rpx;
								height: 42rpx;
								overflow-wrap: break-word;
								color: rgba(0, 0, 0, 1);
								font-size: 28rpx;
								font-family: Roboto-Medium;
								font-weight: 500;
								text-align: left;
								white-space: nowrap;
								line-height: 42rpx;
							}

							.text_10 {
								width: 74rpx;
								height: 36rpx;
								overflow-wrap: break-word;
								color: rgba(107, 114, 128, 1);
								font-size: 24rpx;
								font-family: Roboto-Regular;
								font-weight: normal;
								text-align: left;
								white-space: nowrap;
								line-height: 24rpx;
							}
						}
					}

					.text-wrapper_3 {
						background-color: rgba(253, 246, 236, 1);
						height: 40rpx;
						border: 2rpx solid rgba(250, 236, 216, 1);
						width: 106rpx;
						margin: 50rpx 0 0 254rpx;

						.text_11 {
							width: 72rpx;
							height: 24rpx;
							overflow-wrap: break-word;
							color: rgba(230, 162, 60, 1);
							font-size: 24rpx;
							font-family: Roboto-Regular;
							font-weight: normal;
							text-align: left;
							white-space: nowrap;
							line-height: 24rpx;
							margin: 8rpx 0 0 16rpx;
						}
					}

					.image-wrapper_1 {
						background-color: rgba(245, 108, 108, 1);
						height: 64rpx;
						border: 2rpx solid rgba(245, 108, 108, 1);
						width: 76rpx;
						margin: 38rpx 28rpx 0 12rpx;

						.label_3 {
							width: 48rpx;
							height: 48rpx;
							margin: 8rpx 0 0 14rpx;
						}
					}
				}

				.box_4 {
					box-shadow: 0px 2rpx 4rpx 0px rgba(0, 0, 0, 0.05);
					background-color: rgba(255, 255, 255, 1);
					width: 694rpx;
					height: 140rpx;
					margin-top: 28rpx;
					justify-content: flex-center;

					.label_4 {
						width: 84rpx;
						height: 84rpx;
						margin: 28rpx 0 0 28rpx;
					}

					.text-wrapper_4 {
						width: 84rpx;
						height: 78rpx;
						margin: 32rpx 0 0 22rpx;

						.text_12 {
							width: 84rpx;
							height: 42rpx;
							overflow-wrap: break-word;
							color: rgba(0, 0, 0, 1);
							font-size: 28rpx;
							font-family: Roboto-Medium;
							font-weight: 500;
							text-align: left;
							white-space: nowrap;
							line-height: 42rpx;
						}

						.text_13 {
							width: 50rpx;
							height: 36rpx;
							overflow-wrap: break-word;
							color: rgba(107, 114, 128, 1);
							font-size: 24rpx;
							font-family: Roboto-Regular;
							font-weight: normal;
							text-align: left;
							white-space: nowrap;
							line-height: 24rpx;
						}
					}

					.text-wrapper_5 {
						background-color: rgba(253, 246, 236, 1);
						height: 40rpx;
						border: 2rpx solid rgba(250, 236, 216, 1);
						width: 82rpx;
						margin: 50rpx 0 0 278rpx;

						.text_14 {
							width: 48rpx;
							height: 24rpx;
							overflow-wrap: break-word;
							color: rgba(230, 162, 60, 1);
							font-size: 24rpx;
							font-family: Roboto-Regular;
							font-weight: normal;
							text-align: left;
							white-space: nowrap;
							line-height: 24rpx;
							margin: 8rpx 0 0 16rpx;
						}
					}

					.image-wrapper_2 {
						background-color: rgba(245, 108, 108, 1);
						height: 64rpx;
						border: 2rpx solid rgba(245, 108, 108, 1);
						width: 76rpx;
						margin: 38rpx 28rpx 0 12rpx;

						.label_5 {
							width: 48rpx;
							height: 48rpx;
							margin: 8rpx 0 0 14rpx;
						}
					}
				}

				.box_5 {
					box-shadow: 0px 2rpx 4rpx 0px rgba(0, 0, 0, 0.05);
					background-color: rgba(255, 255, 255, 1);
					width: 694rpx;
					height: 140rpx;
					margin-top: 28rpx;
					justify-content: flex-center;

					.label_6 {
						width: 84rpx;
						height: 84rpx;
						margin: 28rpx 0 0 28rpx;
					}

					.text-wrapper_6 {
						width: 84rpx;
						height: 78rpx;
						margin: 32rpx 0 0 22rpx;

						.text_15 {
							width: 84rpx;
							height: 42rpx;
							overflow-wrap: break-word;
							color: rgba(0, 0, 0, 1);
							font-size: 28rpx;
							font-family: Roboto-Medium;
							font-weight: 500;
							text-align: left;
							white-space: nowrap;
							line-height: 42rpx;
						}

						.text_16 {
							width: 50rpx;
							height: 36rpx;
							overflow-wrap: break-word;
							color: rgba(107, 114, 128, 1);
							font-size: 24rpx;
							font-family: Roboto-Regular;
							font-weight: normal;
							text-align: left;
							white-space: nowrap;
							line-height: 24rpx;
						}
					}

					.text-wrapper_7 {
						background-color: rgba(253, 246, 236, 1);
						height: 40rpx;
						border: 2rpx solid rgba(250, 236, 216, 1);
						width: 82rpx;
						margin: 50rpx 0 0 278rpx;

						.text_17 {
							width: 48rpx;
							height: 24rpx;
							overflow-wrap: break-word;
							color: rgba(230, 162, 60, 1);
							font-size: 24rpx;
							font-family: Roboto-Regular;
							font-weight: normal;
							text-align: left;
							white-space: nowrap;
							line-height: 24rpx;
							margin: 8rpx 0 0 16rpx;
						}
					}

					.image-wrapper_3 {
						background-color: rgba(245, 108, 108, 1);
						height: 64rpx;
						border: 2rpx solid rgba(245, 108, 108, 1);
						width: 76rpx;
						margin: 38rpx 28rpx 0 12rpx;

						.label_7 {
							width: 48rpx;
							height: 48rpx;
							margin: 8rpx 0 0 14rpx;
						}
					}
				}

				.box_6 {
					box-shadow: 0px 2rpx 4rpx 0px rgba(0, 0, 0, 0.05);
					background-color: rgba(255, 255, 255, 1);
					width: 694rpx;
					height: 140rpx;
					margin-top: 28rpx;
					justify-content: flex-center;

					.label_8 {
						width: 84rpx;
						height: 84rpx;
						margin: 28rpx 0 0 28rpx;
					}

					.text-wrapper_8 {
						width: 84rpx;
						height: 78rpx;
						margin: 32rpx 0 0 22rpx;

						.text_18 {
							width: 84rpx;
							height: 42rpx;
							overflow-wrap: break-word;
							color: rgba(0, 0, 0, 1);
							font-size: 28rpx;
							font-family: Roboto-Medium;
							font-weight: 500;
							text-align: left;
							white-space: nowrap;
							line-height: 42rpx;
						}

						.text_19 {
							width: 50rpx;
							height: 36rpx;
							overflow-wrap: break-word;
							color: rgba(107, 114, 128, 1);
							font-size: 24rpx;
							font-family: Roboto-Regular;
							font-weight: normal;
							text-align: left;
							white-space: nowrap;
							line-height: 24rpx;
						}
					}

					.text-wrapper_9 {
						background-color: rgba(253, 246, 236, 1);
						height: 40rpx;
						border: 2rpx solid rgba(250, 236, 216, 1);
						width: 82rpx;
						margin: 50rpx 0 0 278rpx;

						.text_20 {
							width: 48rpx;
							height: 24rpx;
							overflow-wrap: break-word;
							color: rgba(230, 162, 60, 1);
							font-size: 24rpx;
							font-family: Roboto-Regular;
							font-weight: normal;
							text-align: left;
							white-space: nowrap;
							line-height: 24rpx;
							margin: 8rpx 0 0 16rpx;
						}
					}

					.image-wrapper_4 {
						background-color: rgba(245, 108, 108, 1);
						height: 64rpx;
						border: 2rpx solid rgba(245, 108, 108, 1);
						width: 76rpx;
						margin: 38rpx 28rpx 0 12rpx;

						.label_9 {
							width: 48rpx;
							height: 48rpx;
							margin: 8rpx 0 0 14rpx;
						}
					}
				}
			}

			.group_4 {
				background-color: rgba(255, 255, 255, 1);
				height: 114rpx;
				border: 2rpx solid rgba(229, 231, 235, 1);
				margin-top: 148rpx;
				width: 750rpx;

				.list_2 {
					width: 612rpx;
					height: 84rpx;
					justify-content: space-between;
					margin: 16rpx 0 0 70rpx;

					.image-text_4 {
						width: 48rpx;
						height: 84rpx;
						margin-right: 140rpx;

						.label_10 {
							width: 48rpx;
							height: 48rpx;
						}

						.text-group_5 {
							width: 42rpx;
							height: 28rpx;
							overflow-wrap: break-word;
							font-size: 20rpx;
							font-family: Roboto-Regular;
							font-weight: normal;
							text-align: left;
							white-space: nowrap;
							line-height: 28rpx;
							margin: 8rpx 0 0 4rpx;
						}
					}
				}
			}
		}
	}
</style>